<template>
  <view v-if="inputFocus"
        class="cu-bar input fixed-footer elevation-4"
  >
    <input
        v-model.trim="content"
        :adjust-position="true"
        class="solid-bottom"
        confirm-type="send"
        :focus="inputFocus"
		maxlength="300"
        :cursor-spacing="8"
        :placeholder="placeholder"
        @blur="blur"
		@confirm="pubComment"
    />
    <button class="cu-btn bg-cyan" @click="pubComment" :disabled="!content">发送</button>
  </view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		//属性
			props: {
				placeholder: {
					type: String
				}
			},
		data() {
			return {
				content:'',
				msgInputPlaceholder:'说些啥'
			};
		},
		computed: {
			...mapState('commentStore',['inputFocus']),
		},
		methods: {
			...mapMutations('commentStore',['inputContentFocus','inputContentBlur']),
			// 键盘退下
			blur(){
				this.inputContentBlur();
			},
			// 键盘弹起
			focus(){
				this.inputContentFocus();
			},
			// 发布
			pubComment(){
				if(this.content=='') return;
				this.$emit('pubComment', this.content);
				this.content='';
				this.inputContentBlur();
			}
		}
	}
</script>

<style lang="scss">
	
	.solid-bottom{
		position: relative;
	}
	
	.solid-bottom::after {
		content: " ";
		// width: 200%;
		// height: 200%;
		position: absolute;
		top: 0;
		left: 0;
		border-radius: inherit;
		transform: scale(0.5);
		transform-origin: 0 0;
		pointer-events: none;
		box-sizing: border-box;
		border-bottom: 1upx solid rgba(0, 0, 0, 0.1);
	}
	
	
	.cu-bar.input {
		padding-right: 20upx;
		background-color: #ffffff;
	}
	
	.cu-bar.input input {
		overflow: initial;
		line-height: 64upx;
		height: 64upx;
		min-height: 64upx;
		flex: 1;
		font-size: 30upx;
		margin: 0 20upx;
	}
	
	.cu-bar.input .action {
		margin-left: 20upx;
	}
	
	.fixed-footer {
	  bottom: 0;
	  left:0;
	  position: fixed;
	  width: 100%;
	  height: 120upx;
	  z-index: 1024;
	  display: flex;
	  flex-direction: row;
	  align-items: center;
	  justify-content: space-between;
	  padding-top: 14upx;
	  padding-bottom: 14upx;
	  box-sizing: border-box;
	}
	
	.elevation-4 {
	  box-shadow: 0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)!important;
	}
	
	.cu-btn {
		position: relative;
		border: 0upx;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding: 0 30upx;
		font-size: 28upx;
		height: 64upx;
		line-height: 1;
		text-align: center;
		text-decoration: none;
		overflow: visible;
		margin-left: initial;
		transform: translate(0upx, 0upx);
		margin-right: initial;
	}
	
	.cu-btn::after {
		display: none;
	}
	
	.cu-btn + .cu-btn{
		margin-left: 20upx;
	}
	
	.cu-btn:not([class*="bg-"]) {
		background-color: #f0f0f0;
	}
	
	.cu-btn[class*="line"] {
		background-color: transparent;
	}
	
	.cu-btn[class*="line"]::after {
		content: " ";
		display: block;
		width: 200%;
		height: 200%;
		position: absolute;
		top: 0;
		left: 0;
		border: 1upx solid currentColor;
		transform: scale(0.5);
		transform-origin: 0 0;
		box-sizing: border-box;
		border-radius: 12upx;
		z-index: 1;
		pointer-events: none;
	}
	
	.cu-btn.round[class*="line"]::after {
		border-radius: 1000upx;
	}
	
	.cu-btn[class*="lines"]::after {
		border: 6upx solid currentColor;
	}
	
	.cu-btn[class*="bg-"]::after {
		display: block;
	}
	
	.cu-btn.sm {
		padding: 0 20upx;
		font-size: 20upx;
		height: 48upx;
	}
	
	.cu-btn.lg {
		padding: 0 40upx;
		font-size: 32upx;
		height: 80upx;
	}
	
	.cu-btn.cuIcon.sm {
		width: 48upx;
		height: 48upx;
	}
	
	.cu-btn.cuIcon {
		width: 64upx;
		height: 64upx;
		border-radius: 500upx;
		padding: 0;
	}
	
	button.cuIcon.lg {
		width: 80upx;
		height: 80upx;
	}
	
	.cu-btn.shadow-blur::before {
		top: 4upx;
		left: 4upx;
		filter: blur(6upx);
		opacity: 0.6;
	}
	
	.cu-btn.button-hover {
		transform: translate(1upx, 1upx);
	}
	
	.block {
		display: block;
	}
	
	.cu-btn.block {
		display: flex;
	}
	
	.cu-btn[disabled] {
		opacity: 0.6;
		color: #ffffff;
	}
</style>
